import useSyncState from '@/views/hooks/useSyncState';
import React, { useEffect } from 'react';
import './styles/wave.css';

interface IAudioAtlas {
	isMuteAudio: boolean;
	audioLevel: number;
}

const AudioAtlas = (props: IAudioAtlas) => {
	const { isMuteAudio = false, audioLevel = 0 } = props;
	const [animationData, setAnimationData] = useSyncState<number[]>([]);

	const getScaleY = (scale: number) => {
		let rate = 0.2;
		rate = scale / 100 < 0.2 ? 0.2 : scale / 100 > 1 ? 1 : scale / 100;
		return `scaleY(${rate})`;
	};

	useEffect(() => {
		if (isMuteAudio) {
			setAnimationData([0, 0, 0, 0, 0]);
			return;
		}
		if (animationData().length < 5) {
			setAnimationData([...animationData(), audioLevel]);
		} else {
			setAnimationData([audioLevel, ...animationData()]);
		}
	}, [audioLevel, isMuteAudio]);

	return (
		<div className="audo-atlas-container">
			<div className="wave">
				<div
					className={`react react1 ${!isMuteAudio ? 'animation react-active' : ''}`}
					style={{
						transform: getScaleY(animationData()[0])
					}}
				></div>
				<div
					className={`react react2 ${!isMuteAudio ? 'animation' : ''}`}
					style={{
						transform: getScaleY(animationData()[1])
					}}
				></div>
				<div
					className={`react react3 ${!isMuteAudio ? 'animation' : ''}`}
					style={{
						transform: getScaleY(animationData()[2])
					}}
				></div>
				<div
					className={`react react4 ${!isMuteAudio ? 'animation' : ''}`}
					style={{
						transform: getScaleY(animationData()[3])
					}}
				></div>
				<div
					className={`react react5 ${!isMuteAudio ? 'animation' : ''}`}
					style={{
						transform: getScaleY(animationData()[4])
					}}
				></div>
			</div>
		</div>
	);
};

export default AudioAtlas;
